<template>
  <!--组织架构-->
  <el-row :gutter="20">
    <el-col :span="10">
      <el-tree
        :allow-drop="allowDrop"
        :allow-drag="allowDrag"
        draggable
        :data="state.moduleTree"
        :node-key="nodeKey"
        :props="defaultProps"
        :expand-on-click-node="false"
        default-expand-all
        highlight-current
        empty-text="加载中"
        @node-click="handleNodeClick"
        @check-change="checkChange"
        v-bind="$attrs"
      >
        <template #default="{ node, data }">
            <span class="custom-tree-node">
              <span>{{ data.label }}</span>
              <span>
                <module-button :node="node" :data="data"></module-button>
              </span>
            </span>
          </template>
      </el-tree>
      <el-button @click="output" >导出</el-button>
    </el-col>
    <el-col :span="10">
      <module-form v-if="state.currentModule.id !== 0" ></module-form>
    </el-col>
  </el-row>
  
</template>

<script lang="ts">
  import { defineComponent } from 'vue'
  import type Node from 'element-plus/es/components/tree/src/model/node'
  // import type { DragEvents } from 'element-plus/es/components/tree/src/model/useDragNode'
  import type { DropType } from 'element-plus/es/components/tree/src/tree.type'
  // 类型
  import type { IModuleTree } from './types/10-module'
  // 状态
  import { getModuleState } from './state/state-module'

  // 组件
  import moduleButton from './comp/module-button.vue'
  import moduleForm from './comp/module-form.vue'

  /**
   * 模块管理
   */
  export default defineComponent({
    name: 'nf-module-form',
    inheritAttrs: false,
    components: {
      moduleButton,
      moduleForm
    },
    props: {
      nodeKey: {
        type: String,
        default: 'id'
      }
    },
    setup(props, context) {

      const state = getModuleState()
      
      if (state.listToTree)
        state.listToTree()
      
      const defaultProps = {
        children: 'children',
        label: 'label'
      }
      
      // 单击节点
      const handleNodeClick = (data: IModuleTree) => {
        state.currentModule.id = data[props.nodeKey]
        state.currentModule.info = data
      }
 
      const mychange = (e) => {
        // 防止事件冒泡
        e.stopPropagation()
      }

      // 拖拽，
      // 总部门必须是根节点
      const allowDrop = (draggingNode: Node, dropNode: Node, type: DropType) => {
        if (dropNode.label === '总部门') {
          return false
        } else {
          return true
        }
      }
      // 总部门不能拖拽
      const allowDrag = (draggingNode: Node) => {
        return !draggingNode.label.includes('总部门')
      }

      // 导出
      const output = () => {
        if (state.treeToList)
          state.treeToList()
      }

      return {
        // 状态和属性
        state,
        defaultProps,
        // 事件
        output,
        mychange,
        handleNodeClick,
        // 拖拽
        allowDrop,
        allowDrag
      }
    }
  })
</script>


<style>
.my-tree-node {
}
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
</style>